@include('Home.head')
<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a  onclick="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">添加银行卡</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
    <div class="gray-panel">
        {{--<div class="my-search-title-panel am-text-sm am-margin-bottom-sm"><i class="am-icon-lightbulb-o am-text-danger"></i> 提示：实际的运费可能因为收货地址的不同而有差异，具体以提交之后系统计算或卖家协商为准</div>--}}
        <div class="paoduct-title-panel">
            <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">1</span> 添加银行卡</h2>
            <p><i class="am-icon-location-arrow"></i> 银行卡</p>
            <form class="am-form am-form-inline">
                <div class="am-form-group">
                    {{--<label class="sr-only" for="province1">Province</label>--}}
                    <select v-model="bank.bank_name">
                        <option value="中国银行">中国银行</option>
                        <option value="中国工商银行">中国工商银行</option>
                        <option value="中国农业银行">中国农业银行</option>
                        <option value="中国建设银行">中国建设银行</option>
                    </select>
                </div>
                <div class="am-form-group">
                    <input type="text" v-model="bank.bank_address" class="am-form-field am-radius" placeholder="开户行详细地址">
                </div>
                <hr data-am-widget="divider"  style="" class="am-divider-default am-margin-bottom-sm"/>
                <div class="am-form-group am-form-icon">
                    <i class="am-icon-circle"></i>
                    <input type="text" v-model="bank.card_number" v-on:keyup="number()" class="am-form-field am-radius" placeholder="卡号">
                </div>
                <div class="am-form-group am-form-icon">
                    <i class="am-icon-user"></i>
                    <input type="text" v-model="bank.name" class="am-form-field am-radius" placeholder="真实姓名">
                </div>
                <div class="am-form-group am-form-icon">
                    <i class="am-icon-phone"></i>
                    <input type="text" v-model="bank.phone" class="am-form-field am-radius" placeholder="手机号码">
                </div>
                <input type="hidden" value="1" name="paytype" id="paytype">
                <p class="am-text-center"><button type="button" class="am-btn am-btn-danger am-radius am-btn-block" v-on:click="add()" style="border-radius: 50px;">确定</button></p>
            </form>
        </div>
    </div>

    @include('Home.foot')
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            bank: {
                'id':'',
                'name':'',
                'phone':'',
                'bank_name':'中国银行',
                'bank_address':'',
                'card_number':'',
            }
        },
        methods: {
            //初始化 系统管理员列表
            initialize:function () {
                //编辑
                var id = this.obtain('id');
                if(id > 0){
                    $.post("/home/member/addbank",{'_token':'{{csrf_token()}}',id:id,class:'find'},function (res) {
                        if(res.code){
                            app.bank = res.data
                        } else {
                            layer.msg(res.data);
                        }
                    });
                }

            },
            number:function () {
                app.bank.card_number = app.bank.card_number.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1 ");
            },
            //获取url id
            obtain:function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == val){
                        return pair[1];
                    }
                }
            },
            add:function () {
                if(app.bank.bank_address == ''){
                    layer.msg('请输入开户行详细地址');
                    return false;
                }
                if(app.bank.card_number == ''){
                    layer.msg('请输入卡号');
                    return false;
                }
                if(app.bank.name == ''){
                    layer.msg('请输入真实姓名');
                    return false;
                }
                if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(app.bank.phone))){
                    layer.msg('请输入正确的电话号码');
                    return false;
                }
                $.post("/home/member/addbank",{'_token':'{{csrf_token()}}',class:'add',bank:app.bank},function (res) {
                    if(res.code){
                        layer.msg(res.data);
                        window.location.href="/home/member/banklist";
                    } else {
                        layer.msg(res.data);
                    }
                });
            }
        },
        //自动执行
        mounted: function () {
            this.initialize();//分公司
        },
    });
</script>
</html>
